<template>
	<view class="canvas-container">
		<l-painter isCanvasToTempFilePath @success="handleSuccess" :hidden="isShowImg"
			css="width: 750rpx; padding-top: 32rpx;background: linear-gradient(180deg, #A694EA 0%, #FAF5FF 80%);">
			<l-painter-view class="result-content" css="width: 100%;padding: 0 32rpx;box-sizing: border-box;">
				<l-painter-view class="result-card"
					css="width: 100%;height:345px;border-radius: 20px;background: #FFFFFF;">
					<l-painter-view class="result-head"
						css="width: 100%;height: 194rpx;border-top-left-radius: 20px;border-top-right-radius: 20px;padding: 48rpx 0 0 40rpx;box-sizing: border-box;background: linear-gradient(180deg, #EEDEFF 0%, #FAF5FF 100%);">
						<l-painter-view class="username">
							<l-painter-text :text="title"
								css="position: ab;display: block; font-size: 28rpx;color: #34314F;margin-bottom: 20rpx;" />
							<l-painter-text :text="mainTitle"
								css="display: block; font-size: 56rpx;color: #34314F;line-height: 68rpx;font-weight:600" />
						</l-painter-view>
					</l-painter-view>
					<l-painter-view class="result-desc">
						<l-painter-text :text="mainTitleDesc"
							css="max-width: 318px;margin-bottom: 56rpx;padding-left: 40rpx;font-weight: 400;font-size: 28rpx;color: #34314F;line-height: 40rpx;text-align: left;box-sizing: border-box;" />
					</l-painter-view>

					<!-- 身强型 -->
					<l-painter-view class="result-info"
						css="position: relative;dislpaly: flex;padding-left: 40rpx;padding-right: 28rpx; box-sizing: border-box;">

						<!-- 左侧文字 -->
						<l-painter-view class="result-info-wrap" css="width: calc(100% - 162px);">
							<l-painter-view class="common-head" css="display: flex;margin-bottom: 24rpx;">
								<l-painter-image src="https://hxs.dsjhs.com:553/prod-api/profile/shenxing.png"
									css="display: block;object-fit: cover; object-position: 50% 50%; width: 26px; height: 26px;" />
								<l-painter-text :text="shenqiangxing"
									css="margin-left: 20rpx;font-weight: 600;font-size: 36rpx;color: #34314F;line-height: 25px;" />
							</l-painter-view>
							<!-- 内容 -->

							<!-- 八字 -->
							<l-painter-view class="info-item" css="margin-bottom: 16rpx;">
								<l-painter-text class="label" text="天干" css="min-width: 50px;"></l-painter-text>
								<l-painter-text class="value" :text="tiangan" css="width: 112px;"></l-painter-text>
							</l-painter-view>

							<l-painter-view class="info-item" css="display: flex;margin-bottom: 16rpx;">
								<l-painter-text class="label" text="八字"
									css="display: block;min-width: 50px;"></l-painter-text>
								<l-painter-view class="bazi">
									<l-painter-text class="value" :text="bazi1"
										css="display: block;width: 112px;"></l-painter-text>
									<l-painter-text class="value" :text="bazi2"
										css="display: block;width: 112px;"></l-painter-text>
								</l-painter-view>
							</l-painter-view>

							<l-painter-view class="info-item" css="margin-bottom: 16rpx;">
								<l-painter-text class="label" text="喜用神" css="min-width: 50px;"></l-painter-text>
								<l-painter-text class="value" :text="xiyongshen" css="width: 112px;"></l-painter-text>
							</l-painter-view>
							<!-- <l-painter-view class="info-item" css="margin-bottom: 16rpx;">
								<l-painter-text class="label" text="五行" css="min-width: 50px;"></l-painter-text>
								<l-painter-text class="value" :text="wuxing" css="width: 112px;"></l-painter-text>
							</l-painter-view> -->

						</l-painter-view>

						<!-- 右侧图片 -->
						<l-painter-view class="result-img"
							css="position: absolute;width: 162px;height: 162px;right: 14px;bottom: -20px">
							<l-painter-image class="wx-img"
								src="https://hxs.dsjhs.com:553/prod-api/profile/wuxingbg.png"
								css="width: 162px;height: 162px;" mode="" />
							<l-painter-image class="wx-img"
								src="https://hxs.dsjhs.com:553/prod-api/profile/wuxingxinxi.png"
								css="position: absolute;left: 8px;top: 8px;width: 146px;height: 146px;" mode="" />
							<l-painter-text class="count huo" :text="huo"
								css="position: absolute;width: 60rpx;text-align: center;font-size: 10px;line-height: 28rpx;top: 27px;right: 64px;color: #FF4D4F;" />
							<l-painter-text class="count tu" :text="tu"
								css="position: absolute;width: 60rpx;text-align: center;font-size: 10px;line-height: 28rpx;top: 64px;right: 12px;color: #B86927;" />
							<l-painter-text class="count jin" :text="jin"
								css="position: absolute;width: 60rpx;text-align: center;font-size: 10px;line-height: 28rpx;bottom: 14px;right: 27px;color: #E79320;" />
							<l-painter-text class="count shui" :text="shui"
								css="position: absolute;width: 60rpx;text-align: center;font-size: 10px;line-height: 28rpx;bottom: 14px;left: 30px;color: #3F87F3;" />
							<l-painter-text class="count mu" :text="mu"
								css="position: absolute;width: 60rpx;text-align: center;font-size: 10px;line-height: 28rpx;top: 64px;left: 12px;color: #13C73D;" />

						</l-painter-view>

					</l-painter-view>
				</l-painter-view>

				<l-painter-view class="card-item"
					css="width: 100%;padding: 36rpx 40rpx;margin-top: 24rpx;box-sizing: border-box;background: #FFFFFF;border-radius: 20px;">
					<l-painter-view class="common-head" css="display: flex;margin-bottom: 24rpx;">
						<l-painter-image src="https://hxs.dsjhs.com:553/prod-api/profile/lunming.png"
							css="display: block;object-fit: cover; object-position: 50% 50%; width: 26px; height: 26px;" />

						<l-painter-text text="日柱论命"
							css="margin-left: 20rpx;font-weight: 600;font-size: 36rpx;color: #34314F;line-height: 25px;" />
					</l-painter-view>
					<l-painter-text :text="rizhuText" />
				</l-painter-view>
			</l-painter-view>

			<l-painter-view
				css="width: 100%;padding: 0 32rpx 48rpx 32rpx;margin-top: 16rpx;box-sizing: border-box;text-align: center;">
				<l-painter-text text="推算理论源于八字命理，仅供国学探究，娱乐使用！"
					css="font-weight: 400;font-size: 26rpx;color: #A694EA;line-height: 28px;text-align: center;" />

				<l-painter-view class="copyright" css="display: flex;margin-top: 16rpx;margin-bottom: 36rpx;">
					<l-painter-image src="https://hxs.dsjhs.com:553/prod-api/profile/erweima.png"
						css="display: block;object-fit: cover; object-position: 50% 50%; width: 80px; height: 80px;margin-right: 16rpx;" />
					<l-painter-view class="copyright-info" css="padding-top: 48rpx;text-align: left;">
						<l-painter-text text="看见天性，认识自己！"
							css="margin-bottom: 8rpx;font-weight: 600;font-size: 28rpx;color: #34314F;line-height: 16px;text-align: left;font-style: normal" />
						<l-painter-text text="在人生这场旅程中，一起来探索你的主线剧情吧！"
							css="display: block;font-weight: 400;font-size: 24rpx;color: rgba(11, 15, 18, 0.7);line-height: 34rpx;text-align: left;" />
					</l-painter-view>
				</l-painter-view>

			</l-painter-view>
		</l-painter>
	</view>
</template>

<script>
	import mixin from './mixin.js'
	export default {
		props: {
			isShowImg: {
				type: Boolean,
				default: false
			},
			detail: {
				type: Object,
				default: () => {}
			}
		},
		mixins: [mixin],
		data() {
			return {
				path: '',
				posterData: {}
			}
		},
		created() {

		},
		computed: {
			title() {
				return this.posterData.detail_info.sizhu_info.day.tg + this.posterData.detail_info.sizhu_info.day.dz +
					'日生的 ' + this.posterData.base_info.name + ' 是'
			},
			mainTitle() {
				return this.getTwelveVal() + '格' + '·' + this.mingge
			},
			mainTitleDesc() {
				return this.posterData.detail_info.sizhu_info.sizhu_indication.mingyun.sanshishu_mingyun
			},
			shenqiangxing() {
				return `身${this.posterData.base_info.xiyongshen.qiangruo[3]}型`
			},
			rizhuText() {
				return this.posterData.detail_info.sizhu_info.sizhu_indication.xingge.rizhu
			},
			bazi1() {
				return `【${this.posterData.detail_info.sizhu_info.year.tg }${ this.posterData.detail_info.sizhu_info.year.dz }】【${ this.posterData.detail_info.sizhu_info.month.tg }${ this.posterData.detail_info.sizhu_info.month.dz }】`
			},
			bazi2() {
				return `【${this.posterData.detail_info.sizhu_info.day.tg }${ this.posterData.detail_info.sizhu_info.day.dz }】【${ this.posterData.detail_info.sizhu_info.hour.tg }${ this.posterData.detail_info.sizhu_info.hour.dz }】`
			},
			tiangan() {
				return `【${this.posterData.base_info.xiyongshen.rizhu_tiangan}】`
			},
			xiyongshen() {
				return `【${this.posterData.base_info.xiyongshen.xiyongshen}】`
			},
			// wuxing() {
			// 	return `【${this.posterData.base_info.xiyongshen.yinyang}】`
			// },
			huo() {
				return this.toFixed1(this.posterData.base_info.xiyongshen.huo_score_percent) + '%'
			},
			tu() {
				return this.toFixed1(this.posterData.base_info.xiyongshen.tu_score_percent) + '%'
			},
			shui() {
				return this.toFixed1(this.posterData.base_info.xiyongshen.shui_score_percent) + '%'
			},
			jin() {
				return this.toFixed1(this.posterData.base_info.xiyongshen.jin_score_percent) + '%'
			},
			mu() {
				return this.toFixed1(this.posterData.base_info.xiyongshen.mu_score_percent) + '%'
			}
		},
		watch: {
			detail: {
				handler(newObj, oldObj) {
					if (newObj) {
						this.posterData = newObj
					}
				},
				immediate: true
			}
		},
		methods: {
			handleSuccess(path) {
				this.path = path

			},
			toFixed1(val) {
				var num = val.split('%')[0]
				if (num == 0) {
					return num
				} else {
					return Number(num).toFixed(1)
				}

			},
			saveImg() {
				let saveImg = this.path.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
				uni.getFileSystemManager().writeFile({
					filePath: wx.env.USER_DATA_PATH + '/imageName.png',
					data: saveImg,
					encoding: 'base64',
					success: res2 => {
						uni.saveImageToPhotosAlbum({
							filePath: wx.env.USER_DATA_PATH + '/imageName.png',
							success: function(res) {
								//保存成功
								uni.showToast({
									title: '保存成功'
								})
							},
							fail: function(err) {
								//保存失败
								uni.showToast({
									title: '保存失败'
								})
								console.log(err, '保存失败')
							}
						})
					},
					fail: err2 => {
						console.log(err2)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>